<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>鼠标拖拽</title>
    <style>
      * {
        height: 100vh;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .main {
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr;
        place-items: center;
        background: #000;
        color: #fff;
      }
      .draggable-container {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
      }
      .draggable {
        width: 200px;
        height: 200px;
        background: cornflowerblue;
      }
      .droppable {
        display: grid;
        place-items: center;
        width: 250px;
        height: 250px;
        border: 10px dashed cornflowerblue;
      }
      .dragover {
        border: 10px dashed #ffae00;
      }
      .dropped {
        border: 10px dashed #27ae60;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="draggable-container">
        <div id="draggable" class="draggable" draggable="true"></div>
      </div>
      <div id="droppable" class="droppable"></div>
    </div>
  </body>
  <script>
    let draggable = document.querySelector("#draggable");
    let droppable = document.querySelector("#droppable");
    draggable.addEventListener("dragstart", handleDragstart);
    droppable.addEventListener("dragover", handleDragover);
    droppable.addEventListener("dragleave", handleDragLeave);
    droppable.addEventListener("drop", handleDrop);
    function handleDragstart(e) {
      console.log(e.target.id);
      e.dataTransfer.setData("text/plain", e.target.id);
      e.dataTransfer.dropEffect = "move";
      console.log("开始拖拽");
    }
    function handleDragover(e) {
      e.preventDefault();
      droppable.classList.add("dragover");
      console.log("进入拖拽区域");
    }
    function handleDragLeave(e) {
      droppable.classList.remove("dragover");
      console.log("离开拖拽区域");
    }
    function handleDrop(e) {
      e.preventDefault();
      let arr = [...e.dataTransfer.items];
      console.log(arr);
      arr.forEach((item) => {
          console.log(item);
        if (item.kind === "file") {
          const file = item.getAsFile()
          createPreview(file);
        }else{
     let draggedId = e.dataTransfer.getData("text/plain");
        droppable.appendChild(document.getElementById(draggedId));
        droppable.classList.add("dropped");
        }
   
      });
    }
    function createPreview(imageFile) {
      if (!imageFile.type.startsWith("image/")) {
        return;
      }

      const image = document.createElement("img");
      image.src = URL.createObjectURL(imageFile);
      image.onload = function () {
        URL.revokeObjectURL(this.src);
      };
      droppable.appendChild(image);
    }
  </script>
</html>
